<template>
	<view class="tab-bar">
		<view class="content">
			<view class="one-tab" v-for="(item,i) in tabBarlist" :key="i" @click="selectTabBar(item.pagePath)">
				<view>
					<view class="tab-img">
						<img class='img' :src="routePath===item.pagePath?item.selectedIconPath:item.iconPath" alt="">
					</view>
				</view>
				<view class="title">{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
import tabBar from '@/utils/tabBar.js'
const {cloudTab,noCloudTab}=tabBar
export default{
	props:{
		routePath:{
			type:String,
			default:''
		}
	},
  data(){
    return{
      tabBarlist:[]
    }
  },
  beforeMount: function () {
    // 在组件实例进入页面节点树时执行
    let list=uni.getStorageSync('devListVal')
		if(list.length>0){
			this.tabBarlist=cloudTab()
		}else{
			this.tabBarlist=noCloudTab()
		}
  },
	methods:{
		selectTabBar(path){
			wx.switchTab({
				url: path
			})
		}
	}
}
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
.tab-bar{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	padding: 10rpx;
	background: #F7F7F7;
	color: #7A7E83;
	border-top:2rpx solid #e1e1e1;
	z-index: 998;
	padding-bottom:constant(safe-area-inset-bottom);
	padding-bottom:env(safe-area-inset-bottom);
	.content{
		display: flex;
		justify-content: space-around;
		align-items: center;
		.one-tab{
			display: flex;
			flex-direction: column;
			align-items: center;
			.tab-img{
				width: 60rpx;
				height: 60rpx;
				.img{
					width: 100%;
					height: 100%;
				}
			}
			.title{
				transform: scale(0.7);
			}
		}
	}
	
}
</style>